<template>
	<view class="container">
		<u-navbar title="扫一扫" :autoBack="true" :fixed="true" :bgColor="'transparent'" :titleStyle="{
				color: '#fff',
				fontSize: '16px',
			}" :customStyle="{
				background: 'transparent',
			}"></u-navbar>

		<!-- 扫码区域 -->
		<camera mode="scanCode" class="camera" @scancode="handleScanCode">
			<!-- 扫码框 -->
			<view class="scan-box">
				<view class="corner-box">
					<view class="corner top-left"></view>
					<view class="corner top-right"></view>
					<view class="corner bottom-left"></view>
					<view class="corner bottom-right"></view>
				</view>
			</view>
		</camera>
		<!-- 提示文字 -->
		<view class="scan-tip">未扫描到二维码，点此反馈</view>

		<!-- 灯光按钮 -->
		<view class="light-btn">
			<image :src='$Config.HTTP_REQUEST_URL + "/img/light.png"' mode="aspectFit" class="light-icon"></image>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btns">
			<view class="btn-item">
				<u-icon name="scan" size="24" color="#fff"></u-icon>
				<text>扫码</text>
			</view>
			<view class="btn-item">
				<text>AR</text>
				<text>AR</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			handleScanCode(e) {
				console.log("扫码结果：", e);
				// 处理扫码结果
			},
		},
	};
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		position: relative;
	}

	.camera {
		width: 450rpx;
		height: 450rpx;
		display: block;
		margin: 320rpx auto 0;
	}

	.scan-box {
		width: 450rpx;
		height: 450rpx;
		background: transparent;
		border-radius: 24rpx;
		position: relative;

		.corner-box {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;

			.corner {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				border-color: #2979ff;
				border-style: solid;
				border-width: 6rpx;

				&.top-left {
					left: -6rpx;
					top: -6rpx;
					border-right: none;
					border-bottom: none;
				}

				&.top-right {
					right: -6rpx;
					top: -6rpx;
					border-left: none;
					border-bottom: none;
				}

				&.bottom-left {
					left: -6rpx;
					bottom: -6rpx;
					border-right: none;
					border-top: none;
				}

				&.bottom-right {
					right: -6rpx;
					bottom: -6rpx;
					border-left: none;
					border-top: none;
				}
			}
		}
	}

	.scan-tip {
		width: 312rpx;
		height: 40rpx;
		margin: 45rpx auto 0;
		border-radius: 24rpx;
		border: 1rpx solid #ffffff;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #ffffff;
		text-align: center;
		font-style: normal;
	}

	.light-btn {
		display: block;
		margin: 50rpx auto 0;

		.light-icon {
			display: block;
			width: 88rpx;
			height: 88rpx;
			margin: 0 auto;
		}
	}

	.bottom-btns {
		margin-top: 220rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.btn-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.btn-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 8rpx;
			}

			text {
				color: #fff;
				font-size: 24rpx;
				line-height: 1.2;

				&:first-child {
					font-weight: bold;
				}
			}
		}
	}
</style>